<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: url('https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJ1bKxwqIcn_mAANXBz3B3OEAALHuQCNRZEAA1cf424.jpg') center center;
      background-repeat: no-repeat;
      background-size: cover;
      object-fit: fill;
    }
  </style>
</head>

<body>
  <script>
    var player;
    var isPlaying = false;
    var updateTimerHandle = undefined;
    var eventsSubscribed = false;

    window.fbAsyncInit = function () {

      FB.init({
        appId: '3024261827613903',
        xfbml: true,
        version: 'v3.2'
      });

      function updateTime() {
        if (isPlaying) {
          time = player.getCurrentPosition()
          try{
            webkit.messageHandlers.currentTimeUpdated.postMessage(time)
          }catch(err){

          }
        }
      }

      function setup(player, msg) {
        try{
          webkit.messageHandlers.onReady.postMessage(msg.type);
        }catch(err){

        }
        

        if (updateTimerHandle) {
          clearInterval(updateTimerHandle);
        }
        updateTimerHandle = window.setInterval(updateTime, 500);

        player.subscribe('startedPlaying', function (e) {
          isPlaying = true;
          try {
            webkit.messageHandlers.startedPlaying.postMessage('');
          } catch (err) {

          }
          try {
            var videoDiv = document.getElementsByTagName('iframe')[0]
            var videoWidht = videoDiv.style.width
            var videoHeight = videoDiv.style.height
            window.FacebookInterface.onStartPlaying(e, videoWidht, videoHeight);
          } catch (err) {

          }
        });

        player.subscribe('paused', function (e) {
          isPlaying = false;
          
          try {
            webkit.messageHandlers.paused.postMessage('');
          } catch (err) {

          }
          try {
            window.FacebookInterface.onPaused(e);
          } catch (err) {

          }

        });

        player.subscribe('finishedPlaying', function (e) {
          isPlaying = false
          try {
            webkit.messageHandlers.finishedPlaying.postMessage('');
          } catch (err) {

          }
          try {
            window.FacebookInterface.onFinishPlaying(e);
          } catch (err) {

          }
        });

        player.subscribe('startedBuffering', function (e) {
          try {
            webkit.messageHandlers.startedBuffering.postMessage('');
          } catch (err) {

          }
          try {
            window.FacebookInterface.onStartBuffering(e);
          } catch (err) {

          }

        });

        player.subscribe('finishedBuffering', function (e) {
          
          try {
            webkit.messageHandlers.finishedBuffering.postMessage('');
          } catch (err) {

          }
          try {
            window.FacebookInterface.onFinishBuffering(e);
          } catch (err) {

          }
        });

        player.subscribe('error', function (e) {
          isPlaying = false
          try {
            webkit.messageHandlers.error.postMessage(e.msg);
          } catch (err) {

          }
          try {
            window.FacebookInterface.onError(e);
          } catch (err) {

          }
        });


      }

      FB.Event.subscribe('xfbml.ready', function (msg) {
        if (msg.type === 'video') {
          player = msg.instance;
          setup(player, msg);
        }

        
      });
    };

    function playVideo() {
      player.play();
    }

    function pauseVideo() {
      player.pause();
    }

    function muteVideo() {
      player.mute();
    }

    function unMuteVideo() {
      player.unmute();
    }

    function setVolumeVideo(vol) {
      player.setVolume(vol);
    }

    function seekVideo(sec) {
      player.seek(sec);
    }

    function getDuration() {
      player.getDuration();
    }

    function getVolume() {
      player.getVolume();
    }

    function getCurrentPosition() {
      player.getCurrentPosition();
    }

    function isMuted() {
      player.isMuted();
    }

  </script>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

  <div style="width=100%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
    <div class="fb-video" data-autoplay="true" data-allowfullscreen="false"
      data-href="https://www.facebook.com/punjabkesariyum/videos/304701115086598"></div>
  </div>

</body>

</html>